<template>
  <div class="customer">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户订单</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 查询条件 -->
    <el-card class="search-card">
      <div class="search-title">查询条件</div>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="订单号：">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单号"></el-input>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-input v-model="searchForm.customerName" placeholder="请输入客户名称">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="出发城市：">
          <el-input v-model="searchForm.fromCity" placeholder="请输入出发城市">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="目的城市：">
          <el-input v-model="searchForm.toCity" placeholder="请输入目的城市">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查 询</el-button>
          <el-button @click="handleReset">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 订单列表 -->
    <el-card class="table-card">
      <div class="table-operations">
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus" @click="$router.push('/order/create')">新增</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
          <el-button icon="el-icon-printer">打印</el-button>
          <el-button icon="el-icon-refresh">刷新</el-button>
          <el-button icon="el-icon-download">下载</el-button>
        </el-button-group>
      </div>

      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="未提交" name="unsubmitted"></el-tab-pane>
        <el-tab-pane label="已提交" name="submitted"></el-tab-pane>
        <el-tab-pane label="已取消" name="cancelled"></el-tab-pane>
      </el-tabs>

      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="orderNo" label="订单编号"></el-table-column>
        <el-table-column prop="orderType" label="订单类型"></el-table-column>
        <el-table-column prop="transportType" label="运输类型"></el-table-column>
        <el-table-column prop="customerName" label="客户名称"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间"></el-table-column>
        <el-table-column prop="fromCity" label="出发城市"></el-table-column>
        <el-table-column prop="toCity" label="目的城市"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="$router.push(`/order/view/${scope.row.orderNo}`)">查看</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OrderList',
  data() {
    return {
      searchForm: {
        orderNo: '',
        customerName: '',
        fromCity: '',
        toCity: ''
      },
      activeTab: 'unsubmitted',
      tableData: [
        {
          orderNo: '0990900',
          orderType: '',
          transportType: '',
          customerName: '上海亚源',
          orderTime: '2015-07-30 20:24:10',
          fromCity: '上海',
          toCity: '香港'
        },
        // 复制多几条相同数据
        {
          orderNo: '0990900',
          orderType: '',
          transportType: '',
          customerName: '上海亚源',
          orderTime: '2015-07-30 20:24:10',
          fromCity: '上海',
          toCity: '香港'
        },
        {
          orderNo: '0990900',
          orderType: '',
          transportType: '',
          customerName: '上海亚源',
          orderTime: '2015-07-30 20:24:10',
          fromCity: '上海',
          toCity: '香港'
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      // 实现搜索逻辑
      console.log('搜索条件：', this.searchForm)
    },
    handleReset() {
      this.searchForm = {
        orderNo: '',
        customerName: '',
        fromCity: '',
        toCity: ''
      }
    },
    handleSelectionChange(selection) {
      console.log('选中的行：', selection)
    },
    handleView(row) {
      console.log('查看行：', row)
    },
    handleEdit(row) {
      console.log('编辑行：', row)
    }
  }
}
</script>

<style scoped>
.customer {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.table-card {
  margin-bottom: 20px;
}

.table-operations {
  margin-bottom: 20px;
}

.el-button-group {
  margin-bottom: 15px;
}

.el-tabs {
  margin-bottom: 15px;
}

/* 覆盖一些Element UI的默认样式 */
:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 0;
  margin-bottom: 10px;
}
</style> 